"use strict";

const gulp = require('gulp');
const { src, dest, watch, series, parallel } = require('gulp');
const plugins = require('gulp-load-plugins')();
const path = require('path');

const browserSync = require('browser-sync').create();
const reload = browserSync.reload;
const clean = require('gulp-clean');

// css
// const cleanCSS = require('gulp-clean-css'); //压缩css
// const less = require('gulp-less');
// const pxtoviewport = require('postcss-px-to-viewport');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const px2rem = require('gulp-px2rem-plugin');
const autoprefixer = require('gulp-autoprefixer');
// const rename = require('gulp-rename');

// js
const concat = require('gulp-concat');
const babel = require("gulp-babel");

// images
const tinypng_nokey = require('gulp-tinypng-nokey');


// web切图 静态服务器 + 监听 scss/html 文件
function web() {
    browserSync.init({
        server: "./",
        port: 3030
    });

    watch("src/sass/**/*.scss", parallel(cleancss, toSass));
    watch("src/js/*.js", parallel(cleanjs, es62es5));
    watch("*.html").on("change", reload);
};

//手机切图 静态服务器 + 监听 scss/html 文件
function phoneFn() {
    browserSync.init({
        server: {
            baseDir: "./",
            index: "phonetem.html",
        },
        port: 3031
    });

    watch("src/sass/**/*.scss", series(parallel(cleancss, toSass), px2remFn));
    watch("src/js/*.js", parallel(cleanjs, es62es5));
    watch("*.html").on("change", reload);
};


/*============================== css ==============================*/
function cleancss() {
    return src('assets/css/main.css', { read: false, allowEmpty: true })
        .pipe(clean());
};

// 合并sass样式 紧凑输出
// 嵌套输出 nested
// 展开输出 expanded
// 紧凑输出 compact
// 压缩输出 compressed
sass.compiler = require('node-sass');
const sassPath = 'src/sass/main.scss';
function toSass() {
    return src(sassPath)
        .pipe(autoprefixer())
        .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
        .pipe(dest('./assets/css'))
        .pipe(reload({ stream: true }));
};

// 手机页面px转rem
function px2remFn() {
    return src('./assets/css/*.css')
        .pipe(px2rem())
        .pipe(px2rem({
            'width_design': 640, //设计稿宽度。默认值640
            'valid_num': 2, //生成rem后的小数位数。默认值4
            'pieces': 10, //将整屏切份。默认为10，相当于10rem = width_design(设计稿宽度)
            'ignore_px': [1, 2], //让部分px不在转换成rem。默认为空数组
            'ignore_selector': [] //让部分选择器不在转换为rem。默认为空数组
        }))
        .pipe(dest('./assets/css'))
        .pipe(reload({ stream: true }));
};

/*
 *  viewportWidth：视口宽度，这里设置为跟设计稿宽度一致；
 *  viewportHeight：视口高度，随便设置一个就可以；
 *  unitPrecision：转换后值的精度，3表示保留3位小数；
 *  viewportUnit：转换成什么视口单位，这里当然是vw；
 *  selectorBlackList：是一个选择符数组，对应声明中的像素单位不会转换；
 *  minPixelValue：最小像素值，大于等于这个值才会转换；
 *  mediaQuery：是否转换媒体查询中的像素。
 */
function postcssFn() {
    var processors = [
        pxtoviewport({
            viewportWidth: 750,
            viewportHeight: 1334,
            unitPrecision: 3,
            viewportUnit: 'vw',
            selectorBlackList: ['.usepixel'],
            minPixelValue: 1,
            mediaQuery: false
        })
    ];

    return src(['assets/css/**/*.css'])
        .pipe(postcss(processors))
        .pipe(dest('assets/css'))
        .pipe(reload({ stream: true }));
};


/*============================== 图片压缩 ==============================*/
function tp() {
    return src('./src/images/*')
        .pipe(tinypng_nokey())
        .pipe(dest('./assets/images'));
}

/*============================== js ==============================*/
function cleanjs() {
    return src('./assets/js/main.js', { read: false })
        .pipe(clean());
};

// ES6转化为ES5 合并
function es62es5() {
    return src("./src/js/*.js")// ES6存放路径
        .pipe(babel())
        .pipe(concat('main.js'))
        .pipe(dest('./assets/js'))
        .pipe(reload({ stream: true }));
};

/*============================== tasks ==============================*/
exports.default = series(web); // 默认任务——web端切图

exports.imageMin = series(tp); // 图片压缩
exports.phone = series(phoneFn); // 手机端切图